*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root{
    --index: calc(1vw + 1vh);
    --color-header: #f7f2f0;
    --color-text: #dbd8d6;
}
@font-face {
    font-family: raleway-c;
    src: url(../fonts/raleway-regular.woff2);
}

@font-face {
    font-family: outfit-c;
    src: url(../fonts/outfit-regular.woff2);
}

body{
    width: auto;
    height: 545vh;
    background: linear-gradient(to bottom, rgb(166, 82, 245) 10%,blue 30%);
    color: var(--color-header);
    font-family: outfit-c;
    overflow-x: hidden;
}

#logo{
    width: calc(var(--index)*40);
    position: absolute;
    left: 42vw;
    top: 1vh;
}

table{
    border-collapse: collapse;
}

th{
    padding: 15px;
}

td{
    padding: 10px 0 10px 0;
}
.container{
    padding: 0 5vw;
}

.main-header{
    height: 100vh;
    font-size: calc(var(--index)*2.7);
}
.title{
    position: relative;
    top: 11vh;
    left: calc(var(--index)*-0.2);
}

.gallery > *{
    padding: 8vh;
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    margin-bottom: calc(var(--index)*5);
}

.img{
    width: calc(var(--index)*40);
    height: auto;
    flex-grow: 0,8;
}

.text-block{
    margin-left: 6vh;
    font-size: 150%;
    flex-grow: 1;
}

.text-header{
    color: var(--color-header);
}
.text-par{
    color: var(--color-text);
    font-size: 90%;
}

.table{
    text-align: center;
    font-size: 1.7vw;
}

table{
    border: 2px solid white;
    display: inline-block;
    border-radius: 7px;
}

th{
    border: 1px solid white;;
}

td{
    border-left: 1px solid white;
    border-right: 1px solid white;
    
}

caption{
    margin-bottom: 20px;
    font-size: calc(var(--index)*1.7);
}